<template>
    <div>
        <el-card>
            <el-table :data="examList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                <el-table-column type="index"></el-table-column><!--索引列-->
                <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
                <el-table-column prop="examName" label="考试名" width="600"></el-table-column>
                <el-table-column prop="examId" label="考试号" width="800"></el-table-column>
                <el-table-column  label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="getMyGrade(scope.row.examId)" type="primary" style="margin-left: 16px;" >
                            查看成绩
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer
                    title="我是标题"
                    :visible.sync="drawer"
                    :with-header="false"
                    size="70%">
                <el-card>
                    <el-table  :data="myGradeList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                        <el-table-column type="index"></el-table-column><!--索引列-->
                        <el-table-column label="学生姓名" prop="studentName"></el-table-column>
                        <el-table-column label="学生学号" prop="studentNumber"></el-table-column>
                        <el-table-column label="原始分" prop="originalScore"></el-table-column>
                        <el-table-column label="赋分" prop="assignScore"></el-table-column>
                        <el-table-column label="1" prop="courseGrade"></el-table-column>
                        <el-table-column label="2" prop="courseId"></el-table-column>
                        <el-table-column label="3" prop="courseIdPlus"></el-table-column>
                        <el-table-column  label="操作">
                            <template slot-scope="scope">
                                <!--修改按钮-->
                                <!--把这一行对应的id值传到处理函数中@click="showEditDialog(scope.row.id)"-->
                                <el-button type="primary"  size="mini" @click="innerDrawer = true"  style="margin-left: 16px;">查看详情</el-button><!--scope.row表示当前这行的用户，用他的id去查询更新-->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-drawer>

        </el-card>
        <el-drawer
                title="我是标题"
                :visible.sync="innerDrawer"
                :with-header="false">
            <h1 class="h">~~~~  加油呀，同学！坚持就是胜利</h1>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: "myGrade",
        data(){
            return {
                myGradeList:{},
                drawer: false,
                examList: [],
                innerDrawer:  false
            }
        },
        created(){
            this.getExamList()
        },
        methods:{
            async getExamList() {
                const {data: res} = await this.$http.get('getExam')
                this.examList = res.data
            },
            async getMyGrade(examId){
                this.drawer = true
                const {data: res} = await this.$http.post('myGrade', this.$qs.stringify({
                    studentNumber:this.GLOBAL.currentUser.studentNumber,
                    examId: examId
                }))
                this.myGradeList = res.data;

            }
        }
    }
</script>

<style scoped>
    .h{
        font-size:30px;
        color: cadetblue;
    }
</style>